<template>
	<view class="comment-item" :style="{ marginLeft: level * 30 + 'px' }">
		<view class="comment-header">
			<view class="comment-user">{{ comment.user?.nickName || '匿名用户' }}</view>
			<view class="comment-time">{{ $dayjs(comment.createTime).format('YYYY年MM月DD日 HH:mm') }}</view>
		</view>
		<view class="comment-body" @tap.stop="$emit('reply', comment)">
			<view class="text">{{ comment.content }}</view>
			<view class="reply-btn">回复</view>
		</view>

		<view v-if="comment.children?.length" class="children">
			<comment-item v-for="child in comment.children" :key="child.id" :comment="child" :level="level + 1" @reply="$emit('reply', $event)" />
		</view>
	</view>
</template>

<script setup>
defineProps({
	comment: Object,
	level: Number
});
</script>

<style lang="scss" scoped>
.comment-item {
	padding: 20rpx;
	border-bottom: 1rpx solid #eee;
	transition: background 0.3s;

	&:hover {
		background: #f9f9f9;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;

		.comment-user {
			font-size: 28rpx;
			color: #666;
			font-weight: bold;
		}

		.comment-time {
			font-size: 24rpx;
			color: #999;
		}
	}

	.comment-body {
		display: flex;
		align-items: center;
		justify-content: space-between; // 左右对齐
		width: 100%;
		gap: 10px; // 文字和按钮之间的间距

		.text {
			flex: 1; // 占满剩余空间
			word-break: break-word; // 允许长单词换行
			overflow-wrap: break-word; // 自动换行
			white-space: normal; // 多行显示
		}

		.reply-btn {
			flex-shrink: 0; // 不被挤压
			padding: 5px 10px;
			color: #007aff;
			cursor: pointer;
		}

		&:active {
			background: rgba(0, 122, 255, 0.1);
		}
	}
	.children {
		margin-top: 20rpx;
		border-left: 4rpx solid #eee;
		padding-left: 20rpx;
	}
}
</style>
